<template>
  <div>
    <!-- 头部区域 -->
    <div class="my-search-box">
      <!-- 左边区域 -->
      <div class="my-search-left" @click="$router.push('/home')"></div>
      <!-- 右边区域 -->
      <form action="" class="my-search-right" @submit.prevent>
        <input
          type="text"
          v-focus
          :placeholder="sketch"
          @keydown.enter="gotogoodscategory"
          v-model="keyword"
        />
        <a @click="gotogoodscategory">搜索</a>
      </form>
    </div>
    <!-- 历史搜索区域 -->
    <div class="SearchHistory">
      <div class="hsyHead">
        <i class="fdj"></i>
        <span>历史搜索</span>
        <div class="dustbin" @click="del"></div>
      </div>
      <div class="hsyItem">
        <ul>
          <li
            v-for="(item, index) in historyList"
            :key="index"
            @click="gtds(item)"
          >
            <span>{{ item }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="searchHot">
      <div class="HotHead">
        <i class="star"></i>
        <span>热门搜索</span>
      </div>
      <div class="hsyItem">
        <ul>
          <li
            v-for="(item, i) in searchHot"
            :key="i"
            @click="gtds(item.frontword)"
          >
            <span :style="{ color: item.color }">{{ item.frontword }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sketch: this.$route.query.sketch,
      searchHot: JSON.parse(
        sessionStorage.getItem("searchHot") || this.$route.query.searchHot
      ), //热门搜索
      keyword: "", //搜索内容
      historyList: JSON.parse(localStorage.getItem("searchhistory") || []), //搜索历史
    };
  },
  methods: {
    //点击热门搜索或者历史记录
    gtds(kew) {
      this.keyword = kew;
      this.gotogoodscategory();
    },
    //点击搜索或者回车
    gotogoodscategory() {
      console.log(this.keyword);
      if (!this.keyword || this.keyword == "" || this.keyword.length < 1) {
        return;
      }
      this.$router.push({
        path: "/goodscategory",
        query: {
          keyword: this.keyword,
        },
      });

      let historys = localStorage.getItem("searchhistory");
      let historyArr = [];
      if (historys) {
        historyArr = JSON.parse(historys); //还原localStrirage数据
      }
      historyArr.unshift(this.keyword);
      let setArr = new Set(historyArr); //去重
      historyArr = [...setArr];
      if (historyArr.length > 10) {
        historyArr.splice(historyArr.length - 1, 1);
      }
      localStorage.setItem("searchhistory", JSON.stringify(historyArr));
    },
    //清空历史记录
    del() {
      this.historyList = [];
      localStorage.setItem("searchhistory", JSON.stringify(this.historyList));
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.my-search-box {
  padding: 5px 0;
  height: 45px;
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  box-sizing: border-box;
  .my-search-left {
    display: block;
    width: 26px;
    height: 20px;
    margin-left: 5px;
    background: url("../assets/image/home/back.png") center no-repeat;
    background-size: contain;
  }
  .my-search-right {
    width: 89%;
    height: 25px;
    line-height: 25px;
    input::-webkit-input-placeholder {
      color: #999;
      font-size: 14px;
    }
    input {
      border: 1px solid #aaa;
      width: 295px;
      border-radius: 4.5px;
      padding: 5px 10px;
      line-height: 25px;
      box-shadow: none;
      box-sizing: border-box;
      height: 25px;
      &:focus {
        border: 1px solid #f46;
      }
    }
    a {
      display: block;
      float: right;
      text-align: center;
      width: 35px;
      height: 25px;
      font-size: 14px;
      color: #666;
    }
  }
}
.SearchHistory {
  padding: 10px;
  border-bottom: 1px solid #eee;
  .hsyHead {
    display: flex;
    align-items: center;
    .fdj {
      width: 15px;
      height: 15px;
      background: url(../assets/image/home/search.png) center no-repeat;
      background-size: contain;
    }
    span {
      font-size: 12px;
      color: #999999;
      margin-left: 5px;
      flex: 1;
    }
    .dustbin {
      width: 15px;
      height: 15px;
      margin-right: 10px;
      background: url(../assets/image/home/dustbin.png) center no-repeat;
      background-size: contain;
    }
  }
  .hsyItem {
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        margin-top: 12px;
        margin-left: 10px;
        font-size: 12.5px;
        line-height: 25px;
        padding: 0 11px;
        border-radius: 3px;
        border: 1px solid #f5f5f5;
      }
    }
  }
}
.searchHot {
  padding: 10px;
  .HotHead {
    display: flex;
    align-items: center;
    .star {
    }
    span {
      font-size: 12px;
      color: #999999;
      margin-left: 5px;
      flex: 1;
    }
  }
  .hsyItem {
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        margin-top: 12px;
        margin-left: 10px;
        font-size: 12.5px;
        line-height: 25px;
        padding: 0 11px;
        border-radius: 3px;
        border: 1px solid #f5f5f5;
      }
    }
  }
}
</style>